<template>
  <div class="">
    <div class="container">
      <a-card class="data-card">
        <a-row>
          <a-col :flex="1">
            <a-form
              :model="formModel"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 18 }"
            >
              <a-row :gutter="20">
                <a-col :span="5">
                  <a-form-item field="status" label="状态">
                    <a-select
                      @change="gostatus"
                      v-model="status"
                      :options="imgclassdata"
                      :fieldNames="{ lable: 'value', value: 'lable' }"
                      placeholder="请选择处理状态"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="5">
                  <a-space :size="18">
                    <a-button type="primary" @click="onPageChange(1)">
                      <template #icon>
                        <icon-search />
                      </template>
                      搜索
                    </a-button>
                    <a-button @click="reset">
                      <template #icon>
                        <icon-refresh />
                      </template>
                      重置
                    </a-button>
                  </a-space>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
        <a-divider style="margin-top: 0" />
        <a-table
          row-key="caseId"
          v-model:selectedKeys="caseIds"
          :loading="loading"
          page-position="bottom"
          :pagination="pagination"
          :columns="columns"
          :data="renderData"
          :bordered="false"
          @page-change="onPageChange"
          @page-size-change="onPageSizeChange"
        >
          <template #identity="{ record }">
            {{ record.identity == 0 ? '老师' : '学生' }}
          </template>
          <template #status="{ record }">
            {{ record.status == 1 ? '已处理' : '未处理' }}
          </template>

          <template #option="{ record }">
            <a-space :size="18">
              <a-button
                type="primary"
                status="success"
                @click="gohandle(record)"
                :disabled="record.status == 1"
                >标记处理</a-button
              >
              <a-button
                type="primary"
                status="success"
                @click="showxqfn(record)"
                >查看</a-button
              >
            </a-space>
          </template>
        </a-table>
      </a-card>
      <!-- 添加菜单 -->
      <!-- 添加菜单 -->
      <a-modal v-model:visible="showxq" :mask-closable="false" unmountOnClose>
        <template #title> 详情</template>
        <div class="feedbackbox">
          <div class="feedbackboxitemdes">
            {{ xqdes.content }}
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import useLoading from '@/hooks/loading';
  import { computed, ref, reactive, watch, nextTick } from 'vue';
  import { feedbacklist, feedbackHandle } from '@/api/feedback';
  import { Pagination } from '@/types/global';
  import { Message, TableColumnData } from '@arco-design/web-vue';
  import { values } from 'lodash';
  const { loading, setLoading } = useLoading(true);
  const generateFormModel = () => {
    return {
      status: '',
    };
  };
  const xqdes = ref();
  const showxqfn = (item: any) => {
    showxq.value = true;
    xqdes.value = item;
  };
  const showxq = ref(false);
  const status = ref();
  const imgclassdata = ref([
    {
      lable: '已处理',
      value: 1,
    },
    {
      lable: '未处理',
      value: 0,
    },
  ]);
  const gohandle = (item: any) => {
    console.log('标记已处理');
    feedbackHandle({ problemId: item.problemId }).then((res: any) => {
      if (res.code == 200) {
        Message.success('已处理');
        fetchData();
      }
    });
  };
  const gostatus = (item: any) => {
    console.log('触发', item);

    if (item == '已处理') {
      formModel.value.status = '1';
    }
    if (item == '未处理') {
      formModel.value.status = '0';
    }
  };
  const columns = computed<TableColumnData[]>(() => [
    {
      title: 'ID',
      dataIndex: 'problemId',
    },
    {
      title: '内容',
      dataIndex: 'content',
      ellipsis: true,
      width: 400,
    },

    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '创建人',
      dataIndex: 'userName',
    },
    {
      title: '反馈人类型',
      dataIndex: 'identity',
      slotName: 'identity',
      align: 'center',
    },
    {
      title: '处理结果',
      dataIndex: 'status',
      slotName: 'status',
      align: 'center',
    },
    {
      title: '功能',
      slotName: 'option',
    },
  ]);
  const caseIds = ref([]);
  const formModel = ref(generateFormModel());
  const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
    total: 0,
  };
  const pagination = reactive({
    ...basePagination,
    'hide-on-single-page': true,
    'show-total': true,
    'show-jumper': true,
    'show-page-size': true,
  });

  const onPageChange = (current: number) => {
    pagination.current = current;
    fetchData();
  };
  const onPageSizeChange = (pageSize: number) => {
    pagination.pageSize = pageSize;
    fetchData();
  };

  //   重置
  const reset = () => {
    status.value = '';
    formModel.value = generateFormModel();
    fetchData();
  };
  //   添加
  const renderData = ref([]);
  //   定义查询接口
  const fetchData = async () => {
    setLoading(true);
    try {
      const data = {
        pageNum: pagination.current,
        ...pagination,
        ...formModel.value,
      };
      feedbacklist(data).then((res: any) => {
        renderData.value = res.data.list;
        pagination.total = res.data.total;
        pagination.current = res.data.pageNum;
      });
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };

  fetchData();
</script>

<style>
  .feedbackbox {
    display: flex;
    flex-direction: column;
  }
  .feedbackboxitemdes {
    height: 300px;
    width: auto;
    overflow-y: auto;
  }
</style>
